import {useState} from "react";

export const StudyUseState = () => {
	const [count, setCount] = useState<number>(0)
	//通过一个新的 state 值更新
	const handeClick = () => {
		// setTimeout(() => {
		setCount(count + 1)
		setCount(count + 1)
		// }, 3000)
	}
	// 通过函数式更新返回新的 state
	const handeClickFn = () => {
		// setTimeout(() => {
		setCount((prevCount) => {
			return prevCount + 1
		})
		setCount((prevCount) => {
			return prevCount + 1
		})
		// }, 3000)
	}

	return (
		<>
			Count:{count}
			<button onClick={handeClick}>+</button>
			<button onClick={handeClickFn}>+</button>
			1.通过一个新的 state 值更新 与 通过函数式更新返回新的 state 去更新数据 没问题
			2.异步=》如果给两个方法分别加上 延时器 通过一个新的 state 值更新 在规定时间内只会执行一次 通过函数式更新返回新的 state则点击多少次延时器结束后都会执行
			3.相同的state 的状态合并 但是 通过函数式 的就是按照顺序合并
		</>
	)
}
